<template>
  <div class="login">
    <div class="center">
      <div class="group">
        <van-form ref="form">
          <van-field
            name="mobile"
            class="mobile"
            :rules="rules.mobile"
            v-model="form.mobile"
            placeholder="请输入手机号"
          >
            <template #left-icon>
              <i class="iconfont">&#xe645;</i>
            </template>
          </van-field>
          <van-field
            v-model="form.code"
            :rules="rules.code"
            placeholder="请输入验证码"
          >
            <template #left-icon>
              <i class="iconfont">&#xe644;</i>
            </template>
            <template #button>
              <van-button size="small" type="primary" @click="send"
                >发送验证码</van-button
              >
            </template>
          </van-field>
        </van-form>
        <van-button @click="submit" class="submit" type="primary" round block
          >登录</van-button
        >
        <div @click="noLogin" class="nologin">暂不登录</div>
      </div>
    </div>
  </div>
</template>

<script>
import { authorizations } from '@/api/login'
import { setLocalToken } from '@/utils/token'
export default {
  data () {
    return {
      form: {
        mobile: '13999999999',
        code: '246810'
      },
      rules: {
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'onBlur' },
          {
            validator: (value, rule) => {
              return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(
                value
              )
            },
            message: '手机号格式有误',
            trigger: 'onChange'
          }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'onChange' }
        ]
      }
    }
  },
  methods: {
    noLogin () {
      this.$router.push('/home')
    },
    send () {
      this.$toast.success({
        message: '246810',
        icon: 'success'
      })
    },
    async submit () {
      const res = await authorizations(this.form)
      // 保存token
      setLocalToken('token', res.data.token)
      // 1.提示登录成功
      this.$toast.success({
        message: '登录成功',
        icon: 'success'
      })
      // 2.跳转
      this.$router.push('/home/my')
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  padding: 30px;
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: @color;
    margin-top: 150px;
    padding: 30px @p15;
    border-radius: 10px;
    box-shadow: 10px 10px 15px #ddd;
    .group {
      background: @color;
      .van-field {
        border-radius: 7px;
        .iconfont {
          font-size: 20px;
          color: @color;
        }
        .van-button {
          background: transparent;
          font-size: 14px;
          color: #333;
          border: 0;
        }
      }
      .submit {
        background: #fff;
        color: @color;
        border: 0;
        margin-top: 40px;
        text-decoration: none;
      }
      .nologin {
        text-align: center;
        font-size: 12px;
        color: #ccc;
        padding-top: 5px;
      }
    }
    .mobile {
      margin-bottom: 20px;
    }
  }
}
</style>
